<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/12/25
  Time: 11:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue--%>
    <script src="/js/vue.js"></script>
    <%--axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <%--elementui--%>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <!-- 引入组件库 必须在引入vue文件后 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        html,body,#app{
            margin: 0px;
            padding: 0px;
            height: 100%;
        }
        .el-container{
            height: 100%;
        }
        .el-header, .el-footer {
            background-color: #262E23;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #545c64;
            color: #333;
            height: 100%;
        }
        .el-aside> .el-menu >.el-submenu{
            border: none;
        }
        .el-main {
            background-color: #FCF5FF;
            color: #333;
            height: 100%;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>
</head>
<body>
   <div id="app">
       <el-container>
           <el-header>
               <div id="head_left" style="width: 15%;float: left;margin-left: -20px">logo</div>
               <div id="head_center" style="width: 70%;float: left;">店铺名</div>
               <div id="head_right" style="width: 15%;float: right;margin-right: -20px">
                   <el-dropdown @command="handleCommand">
                      <span class="el-dropdown-link" >
                          <el-avatar style="margin-top: 10px" :src="userinfo.url"></el-avatar>
                         <i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                       <el-dropdown-menu slot="dropdown">
                           <el-dropdown-item command="info">个人信息</el-dropdown-item>
                           <el-dropdown-item command="updatePwd">修改密码</el-dropdown-item>
                           <el-dropdown-item command="logout">注销登录</el-dropdown-item>
                       </el-dropdown-menu>
                   </el-dropdown>
               </div>
           </el-header>
           <el-container>
               <el-aside width="200px">
                   <%--
                      el-menu:导航菜单
                        default-active:默认选中菜单
                        active-text-color:激活菜单的文本颜色
                   --%>
                   <el-menu
                           default-active="2"
                           class="el-menu-vertical-demo"
                           background-color="#545c64"
                           text-color="#fff"
                           :unique-opened="true"
                           active-text-color="#ffd04b">
                       <el-submenu v-for="(f,index) in leftMenu" :index="index+''">
                           <template slot="title"><i :class="f.icon"></i>{{f.mname}}</template>
                           <el-menu-item v-for="(c,index2) in f.children" :index="index+'-'+index2">
                               <a style="color: white;text-decoration: none" :href="c.murl" target="main"><i :class="c.icon"></i>{{c.mname}}</a>
                           </el-menu-item>
                       </el-submenu>
                   </el-menu>
               </el-aside>
               <el-main>
                   <%----%>
                   <iframe src="/views/home.jsp" name="main" width="100%" height="100%" frameborder="0"></iframe>
               </el-main>
           </el-container>
       </el-container>
   </div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            userinfo:{},//表示当前登录者对象
            leftMenu:[],//表示左侧菜单
        },
        created(){
            this.loadUserInfo();//获取当前登录者信息
            this.loadLeftMenu();//加载左侧菜单
        },
        methods:{
            //获取左侧菜单
            loadLeftMenu(){
                axios.get("/menu/getMenu").then(resp=>{
                    if(resp.data.code===200){
                        this.leftMenu=resp.data.data;
                    }
                })
            },
            handleCommand(command) {
                 if(command==="info"){

                 }else if(command==="updatePwd"){

                 }else {
                     //退出登录
                     axios.get("/staff/logout").then(resp=>{
                         if(resp.data.code===200){//resp.data===>R===>code属性
                             //退出成功
                             location.href="/login.jsp";
                         }
                     })
                 }
            },
            loadUserInfo(){
                axios.get("/staff/info").then(resp=>{
                   if(resp.data.code===200){
                       this.userinfo=resp.data.data;
                   }
                })
            }
        }
    })
</script>
</html>
